﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UcSensorVisualizer.ascx.cs" Inherits="TheHeGeo.UserControl.UcSensorVisualizer" %>
<%@ Register assembly="DevExpress.Web.v14.2, Version=14.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>



<style type="text/css">
    .auto-style2 {
        width: 467px;
    }

    .auto-style4 {
        width: 639px;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="../Scripts/jquery.balloon.js"> </script>
<script src="../Scripts/wheelzoom.js"> </script>
<script>
    window.onload = function() {
        var val = document.getElementById("<%= HfMoveable.ClientID %>").value;
        val = val.split('|');
        for (var i = 0; i < val.length; i++) {
            var str = val[i].split('~');
            if (str.length == 6) {
                createMovable(str[0], str[1], str[2], str[3], str[4],str[5]);
            }
        }

        val = document.getElementById("<%= HfUnMoveable.ClientID %>").value;
        val = val.split('|');
        for (i = 0; i < val.length; i++) {
            str = val[i].split('~');
            if (str.length ==6) {
                createUnMovable(str[0], str[1], str[2], str[3], str[4],str[5]);
            }
        }
    };

    var dragObj = null;

    function draggable(obj) {
        obj.style.position = "absolute";
        obj.onmousedown = function() {
            dragObj = obj;
        };
    }

    document.onmouseup = function(e) {
        dragObj = null;
    };

    document.onmousemove = function(e) {
        var x = e.pageX;
        var y = e.pageY;

        if (dragObj == null)
            return;
        dragObj.style.left = x + "px";
        dragObj.style.top = y + "px";
    };
</script>

<script>
    function createMovable(dId, left, top, txt, gt,maDa) {
        var img = $("#<%= ASPxImage1.ClientID %>").offset();
        var iDiv = document.createElement('div');
        iDiv.id = dId;
        iDiv.className = 'SensorMovable';
        iDiv.style["border"] = "0px";
        iDiv.style["solid"] = "#ccc";
        iDiv.style["cursor"] = "move";
        iDiv.style["height"] = "24px";
        iDiv.style["background"] = "white";
        iDiv.style["border-style"] ="solid";
        iDiv.style["border-color"] = "#ff0000";
        iDiv.style["left"] = (parseInt(left) + parseInt(img.left)) + "px";
        iDiv.style["top"] = (parseInt(top) + parseInt(img.top)) + "px";
        iDiv.style["position"] = "absolute";
        iDiv.innerHTML = "<img src=\"../Master/images/sensorIcon.png\" width=\"24\" height=\"24\">" + "<div style=\"height:24px; margin: auto;float: right;align-content: center;\">" + txt + "</div>";
        var root = document.getElementById('root');
        root.appendChild(iDiv);
        draggable(iDiv);
    }

    function createUnMovable(dId, left, top, txt, gt,maDa) {
        var img = $("#<%= ASPxImage1.ClientID %>").offset();
        var iDiv = document.createElement('div');
        iDiv.id = dId;
        iDiv.className = 'SensorUnMovable';
        iDiv.style["border"] = "0px";
        iDiv.style["border-style"] = "solid";
        iDiv.style["border-color"] = "#ff0000";
        iDiv.style["solid"] = "#ccc";
        iDiv.style["cursor"] = "pointer";
        //iDiv.style["background"] = "red";
        iDiv.style["left"] = (parseInt(left) + parseInt(img.left)) + "px";
        iDiv.style["top"] = (parseInt(top) + parseInt(img.top)) + "px";
        iDiv.style["position"] = "absolute";
        iDiv.style["height"] = "24px";
        iDiv.style["width"] = "24px";
        iDiv.innerHTML = "<img src=\"../Master/images/sensorIcon.png\" width=\"24\" height=\"24\">";
        var root = document.getElementById('root');
        root.appendChild(iDiv);
        var ab = gt.split('@');
        var urlBieuDo = "<a href=\"../Equipments/EquipmentMornitoring.aspx?r=" + dId + "&n=" + txt + "&d=" + maDa + "\" target=\"_blank\">Biểu đồ</a>";
        var urlDuLieu = "<a href=\"../Equipments/EquipmentData.aspx?r=" + dId + "&n=" + txt + "&d=" + maDa + "\" target=\"_blank\">Dữ liệu</a>";
        if(ab.length==2)
            $("#" + dId).balloon({ contents: txt + "</br>" + ab[0] + "</br>" + ab[1] + "</br>" + urlBieuDo + "  " + urlDuLieu });
        else {
            $("#" + dId).balloon({ contents: txt + "</br>" + gt + "</br>" + urlBieuDo + "  " + urlDuLieu });
        }
    }

    function getAllDiv() {
        var str = "";
        var img = $("#<%= ASPxImage1.ClientID %>").offset();
        $(".SensorMovable").each(function() {
            //$(this), deltaY, bgPosX, bgPosY, bgWidth, bgHeight);
            str += $(this).attr('id') + "~" + (parseInt($(this).offset().left) - parseInt(img.left)) + "~" + (parseInt($(this).offset().top) - parseInt(img.top)) + "~" + "null" + "|";
        });
        document.getElementById('<%= HfMoveable.ClientID %>').value = str;
    }
</script>

<div style="width: 98%;">
    
    <div>
        <table style="width: 100%;">
            <tr>
                <td class="auto-style4">
                    <dx:ASPxGridLookup ID="grlDuAn" runat="server" AutoGenerateColumns="False"  TextFormatString="{0}" Width="100%" KeyFieldName="MaDuAn" AutoPostBack="True" OnValueChanged="grlDuAn_ValueChanged" IncrementalFilteringDelay="100">
                        <GridViewProperties>
                            <SettingsBehavior AllowFocusedRow="True" AllowSelectSingleRowOnly="True"></SettingsBehavior>
                        </GridViewProperties>
                        <Columns>
                            <dx:GridViewDataTextColumn Caption="Dự án" FieldName="TenDuAn" Name="TenDuAn" VisibleIndex="0">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="Chú thích" FieldName="ChuThich" Name="ChuThich" VisibleIndex="3">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="MaDuAn" FieldName="MaDuAn" Name="MaDuAn" VisibleIndex="4" Visible="False">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="Hạng mục quan trắc" FieldName="HangMucQuanTrac" Name="HangMucQuanTrac" VisibleIndex="2">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="Địa điểm" FieldName="DiaDiem" Name="DiaDiem" VisibleIndex="1">
                            </dx:GridViewDataTextColumn>
                        </Columns>
                        <ClientSideEvents DropDown="function(s, e) {	s.GetGridView().SetWidth(s.GetWidth());}" Init="function(s, e) {s.GetGridView().SetWidth(s.GetWidth());}" />
                    </dx:ASPxGridLookup>
                </td>
                <td align="right" class="auto-style2">
                    <dx:ASPxGridLookup ID="grlData" runat="server" AutoGenerateColumns="False" TextFormatString="{0}" Width="100%" AutoPostBack="True" OnValueChanged="grlData_ValueChanged" KeyFieldName="Id" IncrementalFilteringDelay="100">
                        <GridViewProperties>
                            <SettingsBehavior AllowFocusedRow="True" AllowSelectSingleRowOnly="True"></SettingsBehavior>
                        </GridViewProperties>
                        <Columns>
                            <dx:GridViewDataTextColumn Caption="Chú thích" FieldName="ChuThich" Name="ChuThich" VisibleIndex="0">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="Role" FieldName="Role" Name="Role" VisibleIndex="2" Visible="False">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="Id" FieldName="Id" Name="Id" VisibleIndex="1" Visible="False">
                            </dx:GridViewDataTextColumn>
                        </Columns>
                        <ClientSideEvents DropDown="function(s, e) {	s.GetGridView().SetWidth(s.GetWidth());}" Init="function(s, e) {s.GetGridView().SetWidth(s.GetWidth());}" />
                    </dx:ASPxGridLookup>
                </td>
                <td  colspan="2">
                    <asp:Button ID="btEdit" runat="server" Text="Chỉnh sửa" OnClick="btEdit_Click1" Width="100px"  />
                    <script>
                        function abc() {
                            var img = document.getElementById("wheelzoom");
                            alert(img.style.backgroundSize);
                        }
                    </script>
                </td>
            </tr>
            <tr>
                <td class="auto-style4">
                    <asp:Button ID="btAdd" runat="server" Text="Thêm ảnh"  OnClick="btAdd_Click" Visible="False" Width="77px"  />
                    <asp:Button ID="btDelete" runat="server" Text="Xóa ảnh" OnClick="btDelete_Click" Visible="False"  />
                </td>
                <td align="right" class="auto-style2">
                    <dx:ASPxGridLookup ID="grlSensor" runat="server" AutoGenerateColumns="False"  TextFormatString="{0}" Width="100%" KeyFieldName="MaSensor" AutoPostBack="True" OnValueChanged="grlSensor_ValueChanged" SelectionMode="Multiple" IncrementalFilteringDelay="100" Visible="False">
                        <GridViewProperties>
                            <SettingsBehavior AllowFocusedRow="True" AllowSelectByRowClick="True" ></SettingsBehavior>
                        </GridViewProperties>
                        <Columns>
                            <dx:GridViewCommandColumn ShowSelectCheckbox="True" VisibleIndex="0">
                            </dx:GridViewCommandColumn>
                            <dx:GridViewDataTextColumn Caption="Sensor" FieldName="TenSensor" Name="TenSensor" VisibleIndex="0">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="MaSensor" FieldName="MaSensor" Name="MaSensor" VisibleIndex="2" Visible="False">
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="Mô tả" FieldName="MoTa" Name="MoTa" VisibleIndex="1">
                            </dx:GridViewDataTextColumn>
                        </Columns>
                        <ClientSideEvents DropDown="function(s, e) {	s.GetGridView().SetWidth(s.GetWidth());}" Init="function(s, e) {s.GetGridView().SetWidth(s.GetWidth());}" />
                    </dx:ASPxGridLookup>
                </td>
                <td align="right">
                    <asp:Button ID="btUpdate" runat="server" Text="Lưu thay đổi"  OnClick="btUpdate_Click" OnClientClick=" getAllDiv(); " Visible="False" Width="100px"  />
                </td>
                <td align="right">
                    <asp:Button ID="btCancel" runat="server" Text="Hủy bỏ"  OnClick="btCancel_Click" Visible="False" Width="70px"  />
                </td>
            </tr>
        </table>
    </div>
</div>
<div style="width: 98%" id="root">
    &nbsp;<%--<script > $('#wheelzoom').wheelzoom(); </script>--%><dx:ASPxImage ID="ASPxImage1" runat="server" ShowLoadingImage="true" Width="100%">
                                                                  </dx:ASPxImage>

</div>
<asp:HiddenField ID="HfMoveable" runat="server" />
<asp:HiddenField ID="HfSensorPos" runat="server" />
<asp:HiddenField ID="HfUnMoveable" runat="server" />

<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" CloseAction="CloseButton" HeaderText="Upload ảnh" Height="146px" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" Width="686px">
    <ContentCollection>
        <dx:PopupControlContentControl runat="server" SupportsDisabledAttribute="True">
            <table style="width: 100%;">
                <tr>
                    <td colspan="2">
                        <asp:FileUpload ID="FileUpload1" runat="server" accept="image/*" multiple="false" Visible="False" Width="651px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="Chú thich">
                        </dx:ASPxLabel>
                    </td>
                    <td>
                        <dx:ASPxMemo ID="txtChuThich" runat="server" Height="71px" Width="600px">
                        </dx:ASPxMemo>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <asp:Button ID="btpopOk" runat="server" OnClick="btpopOk_Click" Text="Đồng ý" />
                        <dx:ASPxLabel ID="lblUpload" runat="server" Visible="False">
                        </dx:ASPxLabel>
                    </td>
                </tr>
            </table>
        </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl>